<!doctype html> 
<html lang="zh_CN">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="./fonts/boostrapicons/bootstrap-icons.css">
    <title>栅格系统-01</title>
    <style>
        .row>div{
            background-color: #ccc;
            border:1px solid darkgray;
            height: 60px;
        }
    </style>
  </head>
  <body>

    <div class="jumbotron">
        <h1 class="display-4">Bootstrap基本规范</h1>
        <hr class="my-4">
        <p>1. 容器组件的直接子元素应该是row或者能够作为row的boostrap组件</p>
        <p>2. 容器中可以有多个row</p>
        <p>3. row的直接子元素应该是.col</p>
        <p>4. row默认等分12份</p>
      </div> 
      <!-- container表示一个容器 -->
      <h1>container 两边会留白</h1>
      <div class="container">
          <!-- 容器包含row -->
          <div class="row">
              <!-- row中包含col -->
              <div class="col">
                  <!-- boostrap组件的位置 -->
              </div>
              <div class="col"></div>
              <div class="col"></div>
          </div>
      </div>
      <h1>container-fulid width:100%</h1>
      <div class="container-fluid">
        <!-- 容器包含row -->
        <div class="row">
            <!-- row中包含col -->
            <div class="col">
                <!-- boostrap组件的位置 -->
            </div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
      </div>
      <h3>row默认等分12个列</h3>
      <div class="container-fluid">
        <!-- 容器包含row -->
        <div class="row">
             <!-- boostrap4提供.col默认进行等分 -->
             <div class="col"></div>
             <div class="col"></div>
             <div class="col"></div>
             <div class="col"></div>
             <div class="col"></div>
             <div class="col"></div>
             <div class="col"></div>
             <div class="col"></div>
             <div class="col"></div>
             <div class="col"></div>
             <div class="col"></div>
             <div class="col"></div>
        </div>
        <div class="row">
            <!-- boostrap3使用的方法 col-1 表示这row中12份占1份 -->
            <div class="col-1"></div>
            <div class="col-1"></div>
            <div class="col-1"></div>
            <div class="col-1"></div>
            <div class="col-1"></div>
            <div class="col-1"></div>
            <div class="col-1"></div>
            <div class="col-1"></div>
            <div class="col-1"></div>
            <div class="col-1"></div>
            <div class="col-1"></div>
            <div class="col-1"></div>
        </div>
        <div class="row">
            <div class="col-2"></div>
            <div class="col-4"></div>
            <div class="col-6"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
      </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="./js/plugins/bootstrap/jquery.slim.min.js" ></script>
    <script src="./js/plugins/bootstrap/popper.min.js"></script>
    <script src="./js/plugins/bootstrap/bootstrap.min.js"></script>
  </body>
</html>